<template>
    <div class="app-container">
        <div class="app-box">
            <div class="swipe-container">
            
                <van-swipe :autoplay="3000" indicator-color="white">
                    <!-- banner1 -->
                    <van-swipe-item >
                        <div class="swipe-item swipe-banner1 swipe-strategy1" @click="$router.push('/h5/banner1')">
                            <div class="swipe-title">什么是一卡通?</div>
                            <div class="swipe-subtitle">5种量化策略可选择</div>
                        </div>
                    </van-swipe-item>
                    <!-- banner2 -->
                    <van-swipe-item>
                        <div class="swipe-item swipe-banner2 swipe-strategy2" @click="$router.push('/h5/banner2')">
                            <div class="swipe-title">实时通知</div>
                            <div class="swipe-subtitle">订阅后，24h实时公众号推送</div>
                        </div>
                    </van-swipe-item>
                    <!-- banner3 -->
                    <van-swipe-item>
                        <div class="swipe-item swipe-banner3 swipe-strategy3" @click="$router.push({name: 'StrategyLong'})">
                            <!-- <div class="swipe-title">翻倍山寨</div>
                            <div class="swipe-subtitle">分析师翻倍山寨定期潜伏</div> -->
                            <div class="swipe-title">长线趋势</div>
                            <div class="swipe-subtitle">长线趋势高胜率</div>
                        </div>
                    </van-swipe-item>
                    <!-- banner4 -->
                    <van-swipe-item>
                        <div class="swipe-item swipe-banner4 swipe-strategy4"  @click="$router.push('/invite')">
                            <div class="swipe-title">邀请拿提成</div>
                            <div class="swipe-subtitle">各种推广福利拿捏</div>
                        </div>
                    </van-swipe-item>
                    <!-- banner5 -->
                    <van-swipe-item>
                        <div class="swipe-item swipe-banner4 swipe-strategy5"  @click="$router.push('/setting/join')">
                            <div class="swipe-title">定制量化系统</div>
                            <div class="swipe-subtitle">搭建属于您的量化系统</div>
                        </div>
                    </van-swipe-item>
                    <!-- banner6 -->
                    <van-swipe-item>
                        <div class="swipe-item swipe-banner4 swipe-strategy5"  @click="$router.push('/setting/customized')">
                            <img style="height: 100%;" class="pic" src="https://www.aiaabiok.com/imgs/kaifa.jpg" alt="">
                        </div>
                    </van-swipe-item>

                    
                </van-swipe>
            </div>
            


            <!-- 策略 -->
            <!-- left-icon="volume-o" 1989fa -->
            <p class="global-tip main-tip">推广运营属于你自己的量化系统，公众号？ <span class="maincolor" @click="$router.push('/setting/join')">加盟</span>
            </p>

            <p style="margin-top: 0;" class="global-tip main-tip">定制化开发小程序公众号APP <span class="maincolor" @click="$router.push('/setting/customized')">定制</span>
            </p>
            <!-- notice通知 -->
            <van-notice-bar 
                color="#7d7d7d"
                background="transparent"
                left-icon="volume-o"
                mode="link"
                :text="noticeText"  
                @click="$router.push('/h5/banner1')"
            />

            
            <div class="container-pad">
                <div class="system strategy-container">
                    <div class="system-title" style="text-align: center;margin-bottom: 0;font-size: 16px;">AG五大顶级策略 <span style="display: none;">(成功率由高到低)</span></div>
                    <!-- <div class="system-title">短线合约策略</div> -->
                    <div class="main-subtitle">短线合约策略</div>
                    <div class="strategy-list">
                        <!--  @click="$router.push('/strategy/change')" -->
                        <div class="swipe-strategy swipe-strategy1" @click="handleOpenStrategyDetail(1)">
                            <div class="swipe-title">异动策略</div>
                            <div class="swipe-subtitle">提前预测暴涨或暴跌把握行情起爆点</div>
                        </div>

                        <div class="swipe-strategy swipe-strategy2" @click="handleOpenStrategyDetail(2)">
                            <div class="swipe-title">高低点分型策略</div>
                            <div class="swipe-subtitle">实时提醒局部周期的一个高点和低点</div>
                        </div>
                        <div class="swipe-strategy swipe-strategy3" @click="handleOpenStrategyDetail(3)">
                            <div class="swipe-title">AG趋势策略</div>
                            <div class="swipe-subtitle">价格趋势变化量化，单边价值提升</div>
                        </div>
                        <div class="swipe-strategy swipe-strategy4"  @click="handleOpenStrategyDetail(4)">
                            <div class="swipe-title">波段跟踪策略</div>
                            <div class="swipe-subtitle">震荡行情中把握多空关键点的交易机会</div>
                        </div>

                        <!-- <div class="swipe-strategy swipe-strategy5"  @click="handleOpenStrategyDetail(5)">
                            <div class="swipe-title">中长线趋势策略</div>
                            <div class="swipe-subtitle">主流币以及山寨币的中长线埋伏</div>
                        </div>
                        <div class="swipe-strategy swipe-strategy6"  @click="handleOpenOther">
                            <div class="swipe-title">免费量化信号</div>
                            <div class="swipe-subtitle">待开放</div>
                        </div> -->
                    </div>
                    <!-- <van-swipe :loop="false" indicator-color="white" :width="180" :show-indicators="false">
                    </van-swipe> -->

                </div>


                 <!-- 注意：由于是长线稳定型，信号基本上一个月没几次， -->
                    <!-- 最近的3-5个信号盈利的，不出现止损的 -->
                    <!-- 最新月胜率，半年胜率，年胜率，累计收益率 -->
                    <!-- 最新月收益率，半年收益率，年收益率，累计收益率 -->
                    <!-- 历史收益率，历史胜率 -->
                <div class="system strategy-container">
                    <div class="main-subtitle">长线稳定型策略</div>
                    <!-- <div class="system-title">长线稳定型策略</div> -->
                    <div class="strategy-list">
                        <div class="swipe-strategy swipe-strategy5"  @click="handleOpenStrategyDetail(5)">
                            <div class="swipe-title">中长线趋势策略</div>
                            <div class="swipe-subtitle">高胜率高复利</div>
                        </div>
                        <div class="swipe-strategy swipe-strategy6"  @click="handleOpenOther">
                            <div class="swipe-title">免费量化信号</div>
                            <div class="swipe-subtitle">待开放</div>
                        </div>
                    </div>
                   
                    <!-- <div class="strategy-list">
                        <div class="swipe-strategy strategy-long"  @click="handleOpenStrategyDetail(7)">
                            <div class="swipe-title">中长线趋势策略</div>
                            <div class="swipe-subtitle">高胜率高复利</div>
                        </div>
                    </div> -->
                </div>


                <div class="system">
                    <div class="system-title">长线翻倍山寨区</div>
                    
                    <div class="strategy-list">
                        <div class="swipe-strategy strategy-shanzhai"  @click="handleOpenOther">
                            <div class="swipe-title">分析师顶级策略</div>
                            <div class="swipe-subtitle">长线翻倍山寨潜伏</div>
                        </div>
                    </div>
                </div>

                
            </div>
            
        </div>
       
        
    </div>
</template>

<script>
import { utilsMixin } from '@/mixin/utils'
import { dateFormat } from '@/utils/date-format';
// import { getPushStateList } from '@/api/user';

import { showConfirmDialog } from 'vant'
import Cookies from 'js-cookie';
import { useUserStore } from '@/store/user';
import { mapState, mapActions } from 'pinia'
import { showToast } from 'vant'
import { getWxAppInfo } from '@/api/home'
export default {
    name: 'main',
    mixins: [utilsMixin],
    data() {
        return {
            noticeText: `AG量化信号如何使用？更新至${dateFormat(new Date().getTime(), 'yyyy-MM-dd', )}`,
        }
    },
    created() {
        this.init();
    },
    mounted() {
        console.log('=========', `AG量化信号如何使用？更新至${dateFormat(new Date().getTime(), 'yyyy.MM.dd', )}`)
        // this.noticeText = `AG量化信号如何使用？更新至${dateFormat(new Date().getTime(), 'yyyy-MM-dd', )}`;

    },
    methods: {
        ...mapActions(useUserStore, ['fedLogOut',]),

        init() {
            // 获取所有策略
            // this.getAllstrategy(); 
            // 获取用户设置的策略
            // this.getPushStateList();
            // 免责弹窗
            this.showFirstDialog();
            console.log('======', this.wxOpenId)
            if (!this.wxOpenId) {
                getWxAppInfo().then(response => {
                    if (response.success && response.data != null) {
                        const data = response.data
                        const appid = data.appId
                        const host = location.protocol + '//' + location.host + '/wx/redirect/' + appid
                        const url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + encodeURIComponent(host) + '&response_type=code&scope=snsapi_base&state=123#wechat_redirect'
                        location.href = url
                    }
                })
            }
           
     
        },
        // 打开策略类型
        handleOpenStrategyDetail(type) {
            console.log('=====handleOpenStrategyDetail', type)
            const strategyRouteName = {
                1: 'StrategyChange',
                2: 'StrategyHighLow',
                3: 'StrategyAgtrend',
                4: 'StrategyBandtracking',
                // 5: 'StrategyLongterm',
                // 7: 'StrategyLong'
                5: 'StrategyLong',
            };
            // if (type === 4) {
            //     return showToast('敬请期待');
            // }
            this.$router.push({
                name: strategyRouteName[type],
                query: {
                    id: type,
                }
            })
        },
        showFirstDialog() {
            this.$nextTick(() => {
                if(!Cookies.get('aggrement')) {
                    showConfirmDialog({
                        title: '免责声明',
                        message: '本平台内容与数据仅供参考，不构成投资建议。据此操作，风险自担。订阅服务是为用户提供的一项数据增值服务，属于虚拟商品，一经订阅不支持退订。',
                        cancelButtonText: '不同意',
                        confirmButtonText: '同意'
                    }).then(() => {
                        Cookies.set('aggrement', '1')
                    }).catch(() => { 
                        this.$router.replace({ path: '/login' });
                        this.fedLogOut()
                        
                    });
                }
            });
        },
        // getPushStateList() {
        //     console.log('getPushStateList=====获取用户开通的策略start');
        //     getPushStateList().then(res => {
        //         console.log('getPushStateList=====获取用户开通的策略end', res);
        //         if (res.code === 20000) {
        //             console.log(res)
        //         }
        //     })
        // },
        // getAllstrategy() {
        //     console.log('getAllstrategy=====获取所有策略');
        //     getAllstrategy({}).then(res => {
        //         console.log('getAllstrategy=====获取所有策略end', res);
        //         if (res.code === 20000) {
        //             console.log(res)
        //         }
        //     })
        // },
        handleOpenOther() {
            // this.$router.push({
            //     name: 'StrategyCounterfeit',
            //     query: {
            //         id: 100,
            //     }
            // })
            showToast('敬请期待')
        }
    },
    computed: {
        ...mapState(useUserStore, ['wxOpenId'])
    },
}
</script>

<style lang="less" scoped>
.main-tip {
    margin-top: 10px;
    
    color: #f05b64;
}
.app-box {
    height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    overflow: overlay;
}
.swipe-container {
    margin-top: 16px;
    .van-swipe-item {
        padding: 0 16px;
        box-sizing: border-box;

        .swipe-item {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            height: 160px;
            border-radius: 8px;
            color: #fff;
            .swipe-title {
                font-size: 20px;
                margin-bottom: 10px;
                font-weight: 600;
            }
            .swipe-subtitle {
                font-size: 14px;
                padding: 0 20px;
                text-align: center;
                border: 1px solid #fff;
                border-radius: 4px;
                height: 32px;
                line-height: 32px;
                font-weight: 500;
            }
        }
        // .swipe-banner1 {
        //     background: #fd9568;
        // }
        // .swipe-banner2 {
        //     background: #ffd567;
        // }
        // .swipe-banner3 {
        //     background: #f05b64;
        // }
        // .swipe-banner4 {
        //     background: #2f8cfe;
        // }

    }

   
}
.strategy-container {
    overflow: hidden;
    .swipe-strategy6 {
        background: #999;
    }

}

.strategy-list {
    display: flex;
    flex-wrap: wrap;
}
.swipe-strategy  {
    border-radius: 8px;
    height: 100px;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    font-size: 14px;
    color: #fff;
    // align-items: center;
    justify-content: center;
    flex-direction: column;
    font-weight: 500;
    flex: 0 0 calc(50% - 5px); /* 设置每个项目宽度为50%，减去10px的间距 */
    margin-right: 10px;
    margin-bottom: 10px;
    &:nth-child(2n) {
        margin-right: 0;
    }
    .swipe-subtitle {
        margin-top: 4px;
        font-size: 12px;
        line-height: 20px;
    }
}
.system-title {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 14px;
}

.strategy-shanzhai {
    background: #000!important;
}
.strategy-long {
    background-color: var(--main-color)!important;
}



.swipe-strategy1 {
    // background: #feb986;
    background: #44c4da;
}
.swipe-strategy2 {
    // background: #b69eff;
    background: #9f7b1c;
}
.swipe-strategy3 {
    // background: #7eaeff;
    background: var(--main-color);
}
.swipe-strategy4 {
    // background: #f05b64;
    background: #b76f70;
}
.swipe-strategy5 {
    // background: #ab7575;
    background: #facf3f;
}

.main-subtitle {
    padding-left: 10px;
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 14px;
    position: relative;
    height: 26px;
    line-height: 26px;
    &::after {
        content: '';
        position: absolute;
        left: 0;
        top: 5px;
        height: 16px;
        width: 3px;
        background: linear-gradient(0deg, #6668E6, #6668E6),linear-gradient(0deg, #ECF2FB, #ECF2FB);
        border-radius: 19px;
    }
}
</style>